<template>
  <el-collapse v-model="activeNames" class="custom-collapse">
    <el-collapse-item name="1">
      <template #title>
        <div class="custom-title">
          <el-icon class="arrow-icon" :class="{ 'is-active': activeNames.includes('1') }">
            <ArrowRight />
          </el-icon>
          <span>面板 1</span>
        </div>
      </template>
      <div>这是面板 1 的内容。</div>
    </el-collapse-item>

    <el-collapse-item name="2">
      <template #title>
        <div class="custom-title">
          <el-icon class="arrow-icon" :class="{ 'is-active': activeNames.includes('2') }">
            <ArrowRight />
          </el-icon>
          <span>面板 2</span>
        </div>
      </template>
      <div>这是面板 2 的内容。</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { ArrowRight } from '@element-plus/icons-vue'; // 引入内置箭头图标

export default {
  components: {
    ArrowRight,
  },
  data() {
    return {
      activeNames: ['1'], // 默认展开面板 1
    };
  },
};
</script>

<style scoped>
/* 标题布局：图标和文字横向排列 */
.custom-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 旋转图标 */
.arrow-icon {
  transition: transform 0.3s; /* 添加动画效果 */
}

.arrow-icon.is-active {
  transform: rotate(90deg); /* 展开时箭头向下 */
}

/* 完全移除右侧默认的箭头 */
:deep(.el-collapse-item__arrow) {
  display: none !important; /* 强制隐藏伪元素 */
  content: ''; /* 确保不占位 */
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
</style>
